<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>购物车</el-breadcrumb-item>
    </el-breadcrumb>
    <el-table
      :data="cartProducts"
      style="width: 100%"
    >
      <el-table-column
        width="55">
        <template v-slot:header>
          <el-checkbox size="mini" v-model="checkedAll">
          </el-checkbox>
        </template>
        <template v-slot="scope">
          <el-checkbox
            size="mini"
            :value="scope.row.isChecked"
            @change="updateChecked({
              prodId: scope.row.id,
              checked: $event
            })"
          >
          </el-checkbox>
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="商品"
        width=300
        align="center">
        <template v-slot="scope">
          <el-row class="prod-title"><el-col class="prod-pic"><img :src="scope.row.image"/></el-col><el-col class="prod-name">{{ scope.row.name }}</el-col></el-row>
        </template>
      </el-table-column>
      <el-table-column
        prop="price"
        label="单价"
        align="center">
      </el-table-column>
      <el-table-column
        prop="count"
        label="数量"
        align="center">
        <template v-slot="scope">
          <el-input-number
            :value="scope.row.count"
            @change="updateProdNum({
              prodId: scope.row.id,
              count: $event
            })"
            size="mini"
            :min="1"
            :max="99">
          </el-input-number>
        </template>
      </el-table-column>
      <el-table-column
        prop="totalPrice"
        label="小计"
        align="center">
      </el-table-column>
      <el-table-column
        label="操作"
        align="center">
        <template v-slot="scope">
          <el-button size="mini" @click="deleteFromCart(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="total-area">
      <p>已选 <span class="fontSize20 red"> {{ checkedCount }} </span> 件商品，总价：￥<span class="fontSize20 red"> {{ checkedPrice }} </span></p>
      <el-button type="danger" class="goButton">结算</el-button>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
    name: "Cart",
    computed: {
      ...mapState('cart', ['cartProducts']),
      ...mapGetters('cart', ['checkedCount', 'checkedPrice']),
      checkedAll: {
        get() {
          return this.cartProducts.every(prod => prod.isChecked)
        },

        set(value) {
          this.updateAllChecked(value)
        }
      }
    },
    methods: {
      ...mapMutations('cart', ['deleteFromCart', 'updateProdNum', 'updateChecked', 'updateAllChecked'])
    }
}
</script>

<style>
.prod-pic {
  width: 75px;
  height: 75px;
}
.prod-pic img {
  width: 100%;
}
.prod-name {
  margin-top: 25px;
  width: 60%;
  height: 25px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fontSize20 {
  font-size: 20px;
}
.red {
  color: #ff0000;
}
.total-area {
  width: 100%;
  height: 40px;
  line-height: 40px;
  position: relative;
}
.goButton {
  padding: 12px 40px;
  position: absolute;
  right: 0;
  top: 0;
}
</style>